<template>
    <List @load="buildData" v-model:loading="isLoading"
        :finished="finished" finished-text="没有更多数据了">
        <div class="h-[50px] flex flex-row items-center" v-for="item in listData" :key="item">{{ item }}</div>
    </List>
</template>
<script setup>
import { ref } from 'vue';
import { List } from "vant";
let listData = ref([]);
const isLoading = ref(false);
const finished = ref(false)
const buildData = () => {
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            listData.value.push(listData.value.length + 1)
        }
        isLoading.value  = false;
        if (listData.value.length < 100) {
            finished.value = false;
        }
        else {
            finished.value = true;
        }
    }, 2000);
}



</script>
<style scoped></style>